<template>
  <div>
    <div class="hot_game">
      <div class="hot_game_box">
        <div class="hot_game_title">
          <img src="../../../assets/img/home/ic_hot_game.png" alt="" />
          <span class="title">大家都在玩</span>
        </div>
        <div class="swiper">
          <swiper :options="swiperOptions" class="swiper-box">
            <swiper-slide
              v-for="(item, index) in hotBanners"
              :key="index"
              class="swiper-item"
            >
              <div @click="itemClick(index)" class="gameinfo_box">
                <div class="gameicon">
                  <img :src="item.gameicon" alt="" />
                </div>
                <div class="gamename">{{ item.gamename }}</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  props: {
    hotBanners: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 5,
      },
      // list: [
      //   {gameicon:"https://p1.277sy.com/2021/05/07/6095140fd7f79.gif",gamename:"作妖计-鬼畜连抽版",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/01/06/5ff567d21ac37.gif",gamename:"召唤师（送GM无限抽）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2020/12/31/5fed2b38170ae.gif",gamename:"朝歌天下（山海异兽版）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/01/25/600e23f6950d0.gif",gamename:"天使纪元（送无限充值）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/02/01/6016f78112060.png",gamename:"狂暴之翼（送无限充值）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/02/02/601833b2e9cde.gif",gamename:"风暴召唤师（送无限真充）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/04/16/60793ce36a478.gif",gamename:"我欲修真（无限爆648）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/04/22/6080f26901f96.png",gamename:"暗黑觉醒（0氪不朽神）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/05/07/6095140fd7f79.gif",gamename:"作妖计-鬼畜连抽版",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/01/06/5ff567d21ac37.gif",gamename:"召唤师（送GM无限抽）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2020/12/31/5fed2b38170ae.gif",gamename:"朝歌天下（山海异兽版）",game_type:"1"},
      //   {gameicon:"https://p1.277sy.com/2021/01/25/600e23f6950d0.gif",gamename:"天使纪元（送无限充值）",game_type:"1"},
      // ]
    };
  },
};
</script>

<style lang="less" scoped>
.hot_game {
  margin-top: 0.266667rem;
  width: 9.466667rem;
  padding: 0 0.266667rem;
  .hot_game_box {
    width: 100%;
    height: 3.786667rem;
    border-radius: 0.266667rem;
    background: #fff;
    .hot_game_title {
      padding: 0.4rem 0.266667rem 0;
      font-size: 0.48rem;
      font-weight: 800;
      color: #000;
      display: flex;
      align-items: center;
      img {
        margin-right: 0.133333rem;
        display: inline-block;
        width: 0.586667rem;
        height: 0.586667rem;
      }
    }
  }
}

.swiper {
  margin-top: 0.4rem;
  width: 9.466667rem;
  height: 2.293333rem;
}

.swiper-box {
  width: 9.466667rem;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 1.893333rem !important;
  height: 2.293333rem;
}

.gameinfo_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameicon,
.gameicon img {
  display: inline-block;
  width: 1.333333rem;
  height: 1.333333rem;
  border-radius: 0.266667rem;
}

.gamename {
  padding-top: 0.266667rem;
  width: 1.733333rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  font-size: 0.32rem;
  font-weight: 400;
  color: #222222;
  line-height: 0.533333rem;
}
</style>